<template>
  <view class="comment">
    <card-com :show-gap="false">
      <view class="order-item-card" >
		<view class="order-item-header">
			<view class="order-item-header-left">订单号：{{item.number}} </view>
			<view class="order-item-header-right">{{ item.created_at }}</view>
		</view>
		
		<view class="product">
		  <image class="cover" :src="item.sku_pic" ></image>
		  <view class="desc">
			<view class="title">{{ item.product_title }}</view>
			<view class="money">￥{{ item.total_amount }} 共1件 实付￥{{ item.total_amount }}</view>
			
		  </view>
		</view>
      	
      </view>
    </card-com>
    <card-com :show-gap="false">
      <image-upload-com></image-upload-com>
			<view class="evaluation-tab">
				<view class="evaluation-tab-title">综合评价：</view>
				<view class="evaluation-tab-item-box">
					<view class="evaluation-tab-item" :class="[tabIndex==0?'active':'']" @click="tabChoice()">推荐</view>
					<!-- <view class="evaluation-tab-item" :class="[tabIndex==1?'active':'']" @click="tabChoice(1)">推荐</view> -->
				</view>
			</view>
      <view class="content">
        <uni-easyinput
            type="textarea"
            autoHeight
            placeholder="亲爱的，您对这个产品满意吗？"
            :inputBorder="false"
            v-model="form.content"
        ></uni-easyinput>
      </view>
    </card-com>
    <view class="submit">
      <button
          class="button"
          :plain="true"
          @click="submit"
      >提交评价</button>
    </view>
  </view>
</template>

<script>
import _ from 'lodash'
import store from 'store'
import { mapGetters } from 'vuex'
import CleanFileStore from "mixins/CleanFileStore"
import ImageUploadCom from "components/common/ImageUploadCom"
import { createComment } from "api/commentApi"
import { getOrderItem } from "api/orderApi"

export default {
  name: "comment",
  store,
  mixins: [CleanFileStore],
  components: {ImageUploadCom},
  data: () => ({
    form: {
      // order_id: null,
      // product_id: null,
      content: '',
      images: [],
	 is_favor:1
    },
	tabIndex:1,
	item: {}
  }),
  computed: {
    ...mapGetters(['uploadImages'])
  },
  methods: {
		tabChoice(){
			this.tabIndex = !this.tabIndex
			if(this.tabIndex==1){
				this.form.is_favor = 1
			}else{
				this.form.is_favor = 0
			}
		},
    async createNewComment() {
      // this.form.order_id = this.id
      // this.form.product_id = this.product.id
      this.form.images = this.uploadImages
      this.form.content = _.escape(this.form.content)
			let formNew = {
				item_id:this.id,
				product_id:this.item.product_id,
				data:this.form
			}
      await createComment(formNew)
     uni.showModal({
        title: '提示',
        content: '订单评价成功!',
        showCancel: false,
        success: async (res) => {
          if (res.confirm) {
            uni.redirectTo({url: `/packs/pages/order/index?index=0&status=all`})
          }
        }
      }) 
    },
	async loadOrderItem() {
	    const response = await getOrderItem(this.id)
	    this.item = response
	
	},
    submit() {
      this.createNewComment()
    }
  },
  async onLoad(options) {
      this.id = options.id
	 
      this.loadOrderItem()
  }
}
</script>

<style lang="scss" scoped>
	
.product {
  display: flex;

  margin-top:14rpx;
  padding-bottom:20rpx;
  border-bottom:2rpx solid #f2f2f2;
  .cover {
	width: 160rpx;
	height: 160rpx;
	margin-left: 26rpx;
	margin-right:18rpx;
  }
  .desc {
	width: 510rpx;
	font-size: 26rpx;
	color: #333;
	position:relative;
	 font-weight:600;
	.title {
	  margin-top:22rpx;
	}
	.money{
		position:absolute;
		top:98rpx;
	}
  }
}
.total-amount {
  display: block;
  font-size: 26rpx;
  height:96rpx;
  line-height:96rpx;
  overflow: hidden;
  .fund {
	font-weight: 800;
	margin-left:22rpx;
	float:left;
  }
 
}
	

.comment {
  padding: 20rpx;
  .order-item-card{
  	width: 100%;
  	border: 1px #F5F5F5 solid;
  	border-radius: 10rpx;
  	margin: 0rpx auto;
  	.order-item-header{
  		display: flex;
  		align-items: center;
  		justify-content: space-between;
  		margin-top:18rpx;
  		padding-bottom: 18rpx;
  		border-bottom:2rpx solid #f2f2f2;
  		.order-item-header-left{
  			font-size: 26rpx;
  			color: #333333;
  			font-weight: 500;
  			margin-left:22rpx;
  		}
  		.order-item-header-right{
  			font-size: 24rpx;
  			color: #333;
  			font-weight: 500;
  			margin-right:24rpx;
  		}
  	}
  	
  }
  .content {
    margin-top: 20rpx;
    padding-top: 20rpx;
    border-top: 1px #EEEEEE solid;
  }
  .submit {
    margin-top: 100rpx;
    .button {
      width: 226rpx;
      height: 62rpx;
      line-height: 62rpx;
      background: #D84C29;
      border: none;
      border-radius: 4rpx;
      font-size: 30rpx;
      color: #fff;
    }
  }
}
.evaluation-tab{
	display: flex;
	align-items: center;
	margin: 26rpx auto 34rpx;
}
.evaluation-tab-title{
	font-size: 28rpx;
	font-weight: 600;
}
.evaluation-tab-item-box{
	display: flex;
	align-items: center;
}
.evaluation-tab-item{
	width:122rpx;
	height:38rpx;
	font-size:20rpx;
	line-height:38rpx;
	align-items: center;
	border-radius: 4rpx;
	text-align: center;
	
	margin-right: 30rpx;
	background:#fff;
	color:#999;
	border:2rpx solid #999;
}
.active{
	background: #D84C29;
	color:#fff;
	border:2rpx solid #D84C29;
}
</style>
